

<!-- 在线支付 -->
<template>
	<view class="app">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="在线支付"  colorTheme="black">
			</navHeader>
		</view>
		
		<!-- 支付费用 -->
		<view class="totalFee-Container">
			<image class="logo" :src="icon.logo" mode=""></image>
			
			<view class="feeInfo-Container">
				<view class="feeInfo">
					<text class="money-icon">￥</text>
					<text class="price-int">{{payAmount / 100}}</text>
				</view>
			</view>
		</view>

		<view class="pay-type-list">
			<view class="type-item" @click="changePayType(2)">
				<image class="payTypeIcon" :src="icon.wechat" mode=""></image>
				<view class="con">
					<text class="tit">微信支付</text>
					<text></text>
				</view>
				<image :src="icon.select" class="checkbox" v-if="payType == 2"></image>
				<image :src="icon.empty" class="checkbox" v-else></image>
			</view>
			
			<!-- #ifdef APP-PLUS -->
			<view class="type-item b-b" @click="changePayType(3)">
				<image class="payTypeIcon" :src="icon.alipay" mode=""></image>
				<view class="con">
					<text class="tit">支付宝支付</text>
					<text></text>
				</view>
				<image :src="icon.select" class="checkbox" v-if="payType == 3"></image>
				<image :src="icon.empty" class="checkbox" v-else></image>
			</view>
			<!-- #endif -->
		</view>
		
		<!-- 支付 -->
		<view @click="gotoPayHandler" class="payBtn-Container">
			<text v-if="payType == 2">微信</text><text v-if="payType == 3">支付宝</text>支付<text>￥{{payAmount / 100}}</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	import payResult from '@/common/payResult.js';
	
	export default {
		components: {
			navHeader
		},
		data() {
			return {
				icon: {
					logo: "/static/images/order/pay/logo.png",
					wechat: "/static/images/order/pay/wechat.png",
					alipay: "/static/images/order/pay/alipay.png",

					select: '/static/images/cart/sel.png',
					empty: '/static/images/cart/empty.png',
					
					closeModalBtn: "/static/images/common/closeModal.png",
				},
				
				//支付信息
				payType: 2,
				payModule: "",
				payAmount: 0,
				payApiUrl: {},
				payData: {}
			};
		},
		computed: {
			...mapState(['hasLogin', 'jsApiAppId', 'url'])
		},
		onLoad(options) {
			this.payModule = options.payModule;
			this.payAmount = options.payAmount;
			this.payApiUrl = JSON.parse(options.payApiUrl);
			this.payData = JSON.parse(options.payData);
		},
		onShow() {
			
			var code = sessionStorage.getItem("wxCode");
			if(code) {
				sessionStorage.removeItem("wxCode");
				this.jsApiPayCallback(code);
			}
		},
		methods: {

			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			
			
			//点击支付
			gotoPayHandler() {
				
				var that = this;
				
				//微信|支付宝支付
				if(this.payType == 2 || this.payType == 3) {
					this.wxpayOrAlipayHandler();
				}
			},
			
			
			// 微信|支付宝支付
			wxpayOrAlipayHandler() {
				
				// #ifdef MP-WEIXIN
				this.miniAppPay_fun();
				// #endif
				
				// #ifdef APP-PLUS
				if(this.payType == 2) {
					this.wxAppPay_fun();
				}
				if(this.payType == 3) {
					this.aliAppPay_fun();
				}
				// #endif
				
				// #ifdef H5
				this.jsApiPay_fun();
				// #endif
			},
			
			
			//小程序支付
			miniAppPay_fun() {
				
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function (res) {
						
						var tradeType = "MINAPI";
						var code = res.code;
						that.payData["tradeType"] = tradeType;
						that.payData["code"] = code;
						
						that.$api.globalUtil.requestAjax({
							url: that.payApiUrl.wxPay,
							method: "POST",
							data: that.payData,
							success: function(res) {
								
								if(res.data.success) {
									
									var pay = res.data.response;
									uni.requestPayment({
										_debug: true,
										provider: "wxpay",
										orderInfo: "orderId="+that.orderId,
										timeStamp: ""+pay.timestamp,
										nonceStr: pay.nonceStr,
										package: "prepay_id="+pay.prepayId,
										signType: "MD5",
										paySign: pay.paySign,
										success: function(res) {
											that.$api.msg("支付成功");
											payResult.paymentCallBack({
												payModule: that.payModule,
												response: res
											});
										},
										fail: function(err) {
											that.$api.msg("支付失败");
										}
									});
								}
							},
						});
					},
					fail(err) {
						that.$api.msg(JSON.stringify(err) || "登录失败");
					}
				});
			},
			
			
			//微信APP支付
			wxAppPay_fun() {
				
				var that = this;
				var tradeType = "APP";
				that.payData["tradeType"] = tradeType;

				that.$api.globalUtil.requestAjax({
					url: that.payApiUrl.wxPay,
					method: "POST",
					data: that.payData,
					success: function(res) {
						
						if(res.data.success) {
							
							var pay = res.data.response;
							var orderInfo = {
								appid: pay.appid,  
								noncestr: pay.nonceStr,  
								package: 'Sign=WXPay',
								partnerid: pay.partnerid,  
								prepayid: pay.prepayId,  
								timestamp: ""+pay.timestamp,  
								sign: pay.paySign
							};
							
							uni.requestPayment({
								_debug: true,
								provider: "wxpay",
								orderInfo: orderInfo,
								success: function(res) {
									that.$api.msg("支付成功");
									payResult.paymentCallBack({
										payModule: that.payModule,
										response: res
									});
								},
								fail: function(err) {
									that.$api.msg("支付失败");
								}
							});
						}
					},
				});
			},
			
			
			//支付宝App支付
			aliAppPay_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: that.payApiUrl.aliPay,
					method: "POST",
					data: that.payData,
					success: function(res) {
						
						if(res.data.success) {
							
							var pay = res.data.response;
							
							uni.requestPayment({
								_debug: true,
								provider: "alipay",
								orderInfo: pay,
								success: function(res) {
									that.$api.msg("支付成功");
									payResult.paymentCallBack({
										payModule: that.payModule,
										response: res
									});
								},
								fail: function(err) {
									that.$api.msg("支付失败");
								}
							});
						}
					},
				});
			},
			
			
			//JSAPI支付
			jsApiPay_fun() {
				
				sessionStorage.setItem("backUrl", "/pagesUser/payment?payModule="+this.payModule+"&payAmount="+this.payAmount+"&payApiUrl="+JSON.stringify(this.payApiUrl)+"&payData="+JSON.stringify(this.payData));
				
				
				//获取code
				var APPID = this.jsApiAppId;
				var REDIRECT_URI = encodeURIComponent(this.url + "jsApiPay.html", "UTF-8");
				var getCodeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+APPID+"&redirect_uri="+REDIRECT_URI+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
				window.location.replace(getCodeUrl);
			},
			jsApiPayCallback(code) {
				
				var that = this;
				if (typeof WeixinJSBridge == "undefined"){
				   if( document.addEventListener ){
				       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				   }else if (document.attachEvent){
				       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
				       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				   }
				}else {
					onBridgeReady();
				}
				
				//拉起支付
				function onBridgeReady() {
					
					getWxPayInfo(function(pay) {
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": pay.appId,     		//公众号名称，由商户传入     
								"timeStamp": pay.timeStamp,     //时间戳，自1970年以来的秒数     
								"nonceStr": pay.nonceStr, 		//随机串     
								"package": pay.package,     
								"signType": pay.signType,       //微信签名方式：     
								"paySign": pay.paySign 			//微信签名 
							},
							function(res) {
								if(res.err_msg == "get_brand_wcpay_request:ok") {
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									that.$api.msg("支付成功");
									payResult.paymentCallBack({
										payModule: that.payModule,
										response: res
									});
								} 
							}
						); 
					});
				}
				
				
				//支付信息
				function getWxPayInfo(callBack) {
					
					var tradeType = "JSAPI";
					that.payData["tradeType"] = tradeType;
					that.payData["code"] = code;
					
					that.$api.globalUtil.requestAjax({
						url: that.payApiUrl.wxPay,
						method: "POST",
						data: that.payData,
						success: function(res) {
							
							if(res.data.success) {
								
								var pay = res.data.response;
								
								var orderInfo = {
									appId: pay.appid,  
									timeStamp: ""+pay.timestamp,
									nonceStr: pay.nonceStr,  
									package: 'prepay_id='+pay.prepayId,
									signType: "MD5",
									paySign: pay.paySign
								};
								
								callBack(orderInfo);
							}
						},
					});
				}
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		z-index: 99;
		position: relative;
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
		
		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:rgba(255,255,255,1);
		}
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	/* 支付费用 */
	.totalFee-Container {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		height: 225rpx;
		background:rgba(255,255,255,1);
		border-radius:0px 0px 16rpx 16rpx;
		
		.logo {
			position: absolute;
			left: 0;
			top: 0;
			width: 256rpx;
			height: 223rpx;
		}
		
		.feeInfo-Container {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: absolute;
			width: 100%;
			text-align: center;
			
			.feeInfo {
				position: relative;
				box-sizing: border-box;
				display: inline-block;
				width: 100%;
				height: 50rpx;
			
				.money-icon {
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(210,23,40,1);
				}
				
				.price-int {
					font-size:50rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(210,23,40,1);
				}
				
				.price-float {
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(210,23,40,1);
				}
			}
			
			.timeInfo {
				margin-top: 25rpx;
				width: 100%;
				font-size:22rpx;
				font-family:PingFang SC;
				color:rgba(153,153,153,1);
				line-height:30rpx;
			}
		}
	}

	/* 支付方式 */
	.pay-type-list {
		margin-top: 20rpx;
		width: 100%;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		
		.type-item{
			height: 124rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size:30rpx;
			font-family:PingFang SC;
			color:rgba(51,51,51,1);
			
			&.balance_no {
				color:rgba(153,153,153,1);
			}
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.b-b::after {
		left: 30rpx;
	    right: 30rpx;
	}
	.payTypeIcon {
		margin-right: 20rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.balance {
		display: inline-block;
		margin-left: 20rpx;
		color: #999999;
	}
	
	/* 单选按钮 */
	.checkbox {
		height: 36rpx;
		width: 36rpx;
	}


	/* 支付 */
	.payBtn-Container {
		margin: 0 auto;
		margin-top: 200rpx;
		width:600rpx;
		height:90rpx;
		line-height:90rpx;
		background:#FE5E49;
		border-radius:45rpx;
		text-align: center;
		font-size:34rpx;
		font-family:PingFang;
		color:rgba(255,255,255,1);
	}
	
</style>



